In this lesson, we're going to move away from our application being plain HTML and convert it to being powered by React. To do that, we'll need to add a number of libraries:

• react
• react-dom
• babel

Here are the packages that we'll be adding in the next video:

<script src="https://unpkg.com/react@16.3.0-alpha.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3.0-alpha.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Here's the commit with the changes made in this video.

The changes we've just implemented should look pretty familiar - they were just converting parts of our app from HTML to being powered by React Components.

Combining React and Redux

Alrighty, so you've learned React. You've built Redux and used it in a regular HTML application. But now we've started converting that HTML to a React application. In the following video we're going to start connecting the React Components to the Redux store.

I want you to pay attention to a few things in the next screencast:

• where the store.dispatch() code goes in a React component
• how a React component is passed the Redux store as a prop

Here's the commit with the changes made in this video.

In order to save time, we used an uncontrolled component for our input field.

ref

Refs provide a way to access DOM nodes or React elements created in the render method.

When to Use Refs

The docs outline a few good use cases for refs:

• Managing focus, text selection, or media playback.
• Triggering imperative animations.
• Integrating with third-party DOM libraries.

Let's take a look at a similar example:

class Color extends React.Component {
  alertTextInput = e => {
    e.preventDefault();
    alert(this.colorElement.value);
  };

  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="Add Input"
          ref={(inputElement) => this.colorElement = inputElement}
        />

        <button onClick={this.alertTextInput}>Alert Input</button>
      </div>
    );
  }
}

In the line ref={(inputElement) => this.colorElement = inputElement}, inputElement is a reference to the input DOM element. We are storing a reference to the input DOM element in the colorElement instance property of the Color class.

Please note:

React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts. Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires.

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

componentDidMount()

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree)…If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

forceUpdate()

By default, when your component’s state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Summary

In this section, we converted our plain HTML application to one using React Components. We didn't implement any new features. Instead, we just improved the code's organization by breaking out separate parts into reusable chunks.